const ctx = wx.createCanvasContext('\myCanvas');
const upLoadUrl = 'https://hello-cloudbase-3gw8f5h0ac31340e-1259504677.ap-guangzhou.app.tcloudbase.com/container-applet-canvas/watermark';
Page({
  data: {
    color: "blue",
    hidden: true,
    isPicker: true,
    imagePath: '',
    picPath: "",
    bg: "https://hello-cloudbase-3gw8f5h0ac31340e-1259504677.ap-guangzhou.app.tcloudbase.com/container-applet-canvas/logo.png",
  },
  isShowImg() {
    this.setData({
      bg: "",
    })
  },
  onClickLeft() {
    wx.navigateBack({
      delta: 1,
    })
  },
  /**
   * 颜色板
   */
  sliderColor(e) {
    this.setData({
      color: e.detail
    })
  },
  /**画布手指移动 */
  canvasMove(e) {
    //console.log(e)
    let { x, y } = e.touches[0];
    ctx.setFillStyle(this.data.color);
    ctx.fillRect(x, y, 10, 10);
    ctx.draw(true)
  },

  /**清除留言 */
  clear() {
    ctx.draw(false)
  },
  /**留言上墙 (云)*/
  save() {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
    }).then(res => {
      this.clear()
      this.setData({
        imagePath: res.tempFilePath
      }),
        wx.uploadFile({
          filePath: res.tempFilePath,
          name: 'file',
          url: upLoadUrl,
          success(res) {
            that.isShowImg()
            wx.showToast({
              title: '3秒后查看留言',
              duration: 3000
            })
          },
          fail(res) {
            wx.showToast({
              title: res,
            })
          }

        })
    });
  },
  //我要留言
  sign() {
    this.setData({
      hidden: false
    })
  },

  //查看留言
  reload() {
    this.setData({
      hidden: true,
    });
    setTimeout(() => {
      this.setData({
        bg: "https://hello-cloudbase-3gw8f5h0ac31340e-1259504677.ap-guangzhou.app.tcloudbase.com/container-applet-canvas/logo.png",
      })
    }, 2000)
  },
  /**点击图片 */
  preview() {
    wx.previewImage({
      urls: [this.data.bg],
    })
  }
})